<template>
    <div>
        <div class="menu">
            <el-button @click="plusUser" type="primary" style="margin-left: 16px; float:right">
                点我添加
            </el-button >
            <el-input v-model="search" placeholder="请输入用户名"  style=" width:200px;"></el-input>
            <el-button @click="searchUser" type="primary" >点我搜索</el-button>
        </div>
        <!-- wayList--userList -->
        <div class="list">
            <el-table :data="userList" style="width: 100%">
                <el-table-column label="用户名称" width="180">
                    <template #default="scope">
                        <span>{{ scope.row.userName }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="用户电话" width="180">
                    <template #default="scope">
                        <span>{{ scope.row.userTel }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="用户邮箱">
                    <template #default="scope">
                        <span>{{ scope.row.userEmail }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="用户地址">
                    <template #default="scope">
                        <span>{{ scope.row.userAddress }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button size="mini" @click="handleUp(scope.$index, scope.row)">置顶</el-button>
                        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button size="mini" type="danger" @click="deleteUser(scope.row.userName)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

        </div>
        <el-pagination background :total="total" :page-size="currentUserSize" @current-change="changeList" :current-page="currentUserPage"
            layout="prev, pager, next">
        </el-pagination>
        <el-form :model="formLabelAlign" v-show="drawer2" label-width="80px">
            <el-form-item label="用户名">
                <el-input v-model="userName"></el-input>
            </el-form-item>
            <el-form-item label="电话">
                <el-input v-model="userTel"></el-input>
            </el-form-item>
            <el-form-item label="邮箱">
                <el-input v-model="userEmail"></el-input>
            </el-form-item>
            <el-form-item label="地址">
                <el-input v-model="userAddress"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="subForm('ruleForm')">添加</el-button>
            </el-form-item>
        </el-form>

        
        <el-form :model="formLabelAlign" v-show="drawer" label-width="80px">

            <el-form-item label="电话">
                <el-input v-model="userTel"></el-input>
            </el-form-item>
            <el-form-item label="邮箱">
                <el-input v-model="userEmail"></el-input>
            </el-form-item>
            <el-form-item label="地址">
                <el-input v-model="userAddress"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="editForm">修改</el-button>
            </el-form-item>
        </el-form>

    </div>
</template>

<script>
import axios from 'axios';
export default {
    name: 'User',
    data() {
        return {
            userList: [],
            drawer: false,
            userName: '',
            userAddress: '',
            userEmail: '',
            userTel: '',
            userId: '',
            currentUserSize:4,
            total: 0,
            currentUserPage:1,
            search:'',
            drawer2:false,
            formLabelAlign: {
                name: '',
                region: '',
                type: ''
            }
        }
    },
    methods: {

        getList(num) {
            axios.get("http://localhost:3000/getUserList",{params:{currentUserPage:num}}).then(res => {
                if (res.status == 200) {
                    this.userList = res.data.userList; 
                    this.total=res.data.total;
                }
            })
        },
        plusUser(){
            this.drawer2=true;
        },
        editForm() {
            let userName = this.userName;
            let userAddress = this.userAddress;
            let userEmail = this.userEmail;
            let userTel = this.userTel;
            axios.post("http://localhost:3000/editUser", {
                userName: userName,
                userAddress: userAddress,
                userEmail: userEmail,
                userTel: userTel
            }).then(res => {
                if (res.data.code == 200) {
                    this.drawer = false;
                    this.getList(1)
                }
            })
        },
        subForm() {
            let userName = this.userName;
            let userAddress = this.userAddress;
            let userEmail = this.userEmail;
            let userTel = this.userTel;
            axios.post("http://localhost:3000/plusUser", {
                userName: userName,
                userAddress: userAddress,
                userEmail: userEmail,
                userTel: userTel
            }).then(res => {
                if (res.data.code == 200) {
                    this.$message({
                        message: '成功',
                        type: 'success'
                    });
                    this.drawer2 = false;
                    this.getList(1);
                } else {
                    this.$message({
                        message: '警告',
                        type: 'warning'
                    });
                }
            })
            // this.drawer2=false;
        },
        deleteUser(name) {
            console.log(name);
            axios.post("http://localhost:3000/delUser", {
                name: name
            }).then(res => {
                if (res.data == 'success') {
                    this.getList(1);
                }
            })

        },
        handleEdit(index, row) {
            this.drawer = true;
            
            this.userAddress = row.userAddress;
            this.userEmail = row.userEmail;
            this.userTel = row.userTel;
            this.userName = row.userName;
        },

        changeList(num) {
            this.currentUserPage=num;
            this.userList = []
            let index = 0;
            let last = 3;
            if (num * this.currentUserSize >= this.total) {
                last = this.total;
            }else if(num * this.currentUserSize < this.total){
                last=num * this.currentUserSize;
            }
            console.log("index",index,"last",last);
            for (let i = (num - 1) * this.currentUserSize; i < last && index <= 3; i++) {
                this.userList[index++] = this.List[i];
            }
            // console.log(this.List);
            console.log(this.userList);
        },
        searchUser() {
            axios.post('http://localhost:3000/searchUser', { userName:this.search })
                .then(res => {
                    if (res.status== 200) {
                        this.userList = res.data;
                    }
                })
        },
        handleUp(index,row){
            this.userName=row.userName;
            console.log(this.userName);
            axios.post('http://localhost:3000/upUser',{name:this.userName})
            .then(res => {
                    if (res.status== 200) {
                        this.userList = res.data;
                    }
                })
        },
        changeList(num){
            this.getList(num);
        }


    }, mounted() {
        this.getList(1);
    }

}
</script>
<style>
.list {
    margin: 0 auto;
    border: 5px dashed paleturquoise;
    width: 100%;
    height: 100%;
}

.menu {
    margin: 0 auto;
    border: 5px dashed pink;
    width: 100%;
    height: 30px;
    padding-bottom: 8px;
}

* {
    margin: 0 auto;
    z-index: 0;

}

label input {
    position: absolute;
    left: 0;
    top: -300;
    opacity: 0;
}

.btn {
    left: 100px;
    top: 0px;
    width: 80px;
    height: 30px;
    background-color: rgb(49, 132, 241);
    border: 0px;
    border-radius: 10px;
    color: white;
    position: relative;
    overflow: hidden;
    text-align: center;
    vertical-align: center;
    border-radius: 5px;
    display: inline-block;

}
</style>
